<template>
  <!-- 未获取到userId -->
  <div v-if="isLoading" class="load" style="padding: 0.4rem">
    <Image src="http://applet.atptest.com/BTHXc4r81717641672190.png?v=1717641672479" />
    <div style="display: flex; justify-content: center; flex-direction: column; align-items: center">
      <div style="font-size: 20px; color: #5b8cfe">正在进入应用...</div>
    </div>
  </div>
  <div v-else class="log_container" :style="{ paddingTop: isMobile == 'true' ? '0px' : '70px' }">
    <div class="top_container" v-if="isMobile == 'false'">
      <div class="top_title_container">
        <div class="title">{{ currentTitle }}</div>
        <div class="company">{{ company }}</div>
      </div>
    </div>
    <div class="content_container">
      <!-- 看日志 -->
      <ReadLogList v-if="currentTab == 0" />
      <!-- 写日志 -->
      <WriteTab v-if="currentTab == 1" :tempList="tempList" />
      <!-- 模板管理 -->
      <TempManage v-if="currentTab == 3" />
    </div>
    <div class="bottom_tab">
      <div class="tab_item" v-for="(item, index) in tabList" :key="index" @click="tabHandle(index, item.label)" :style="{ color: currentTab == index ? '#23aaf2' : '#000' }">
        <div class="icon">
          <van-icon :name="item.icon" size="0.8rem" />
        </div>
        <div class="text" :style="{ color: currentTab == index ? '#23aaf2' : '#ababab' }">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="log">
import ReadLogList from "./components/readLogList.vue";
import WriteTab from "./components/writeTab.vue";
import TempManage from "./components/tempManage.vue";
import { ref, onMounted, watch, computed } from "vue";
import { Image } from "vant";
import { Local } from "@/utils/storage";
import { IsManager } from "@/api/log";
import * as dd from "dingtalk-jsapi";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const currentTitle = ref("看日志");

const isLoading = ref(true);

const currentTab = ref(null);

const userId = ref("");
userId.value = Local.get("userId");

const cachedData = computed(() => userStore.userId);

// 监听cacheData的变化
watch(cachedData, (newVal, oldValue) => {
  console.log(`缓存数据变化：${oldValue} -> ${newVal}`);
  console.log("|newVal", newVal);
  currentTab.value = localStorage.getItem("logTab") || 0;
  isLoading.value = false; // 加载完成，关闭loading
});

watch(
  () => currentTitle.value,
  () => {
    dd.biz.navigation.setTitle({
      title: currentTitle.value,
    });
  }
);

onMounted(async () => {
  isManager();
  dd.biz.navigation.setTitle({
    title: currentTitle.value,
  });
  isMobile.value = localStorage.getItem("isMobile");
  if (localStorage.getItem("logTab")) {
    currentTab.value = localStorage.getItem("logTab");
  }
  if (localStorage.getItem("logTabTitle")) {
    currentTitle.value = localStorage.getItem("logTabTitle");
  }
  if (!Local.get("userId")) {
    console.log("页面没有userid");
  } else {
    isLoading.value = false; // 加载完
  }
});
const isMobile = ref(false);

const company = ref("深圳市斯贝达电子有限公司");
const tabList = ref([
  {
    label: "看日志",
    icon: "newspaper-o",
  },
  {
    label: "写日志",
    icon: "edit",
  },
  {
    label: "统计导出",
    icon: "bar-chart-o",
  },
  {
    label: "模板管理",
    icon: "apps-o",
  },
]);
//切换底部tab
const tabHandle = (val, title) => {
  currentTab.value = val;
  currentTitle.value = title;
  localStorage.setItem("logTab", currentTab.value);
  localStorage.setItem("logTabTitle", currentTitle.value);
  if (currentTab.value == 1 || currentTab.value == 3) {
    isManager();
  }
};
const isManagerFlag = ref(false);
const isManager = async () => {
  const res = await IsManager({ userId: userId.value });
  isManagerFlag.value = res.data;
  localStorage.setItem("isManager", isManagerFlag.value);
};
</script>
<style lang="scss" scoped>
.load {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 96vh;
  opacity: 0.9;
  background-color: #111;
}
:deep(.van-popup--center) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.4rem;
}
.log_container {
  width: 100%;
  height: 100vh;
  position: relative;
  font-family: 黑体;
  padding-bottom: 60px;
  box-sizing: border-box;
  .top_container {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    box-sizing: border-box;
    background-color: #fff;
    .back_arrow {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .top_title_container {
      flex: 1;
      .title {
        font-size: 0.5rem;
        font-weight: bold;
        text-align: center;
      }
      .company {
        font-size: 0.3rem;
        color: #b0b0b0;
        text-align: center;
      }
    }
    .search_container {
      display: flex;
      align-items: center;
      .search_item {
        display: flex;
        align-items: center;
        font-size: 0.4rem;
        cursor: pointer;
      }
    }
  }
  .content_container {
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    box-sizing: border-box;
  }
  .bottom_tab {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    .tab_item {
      font-size: 0.3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
